<!-- for horizontal scrolling -->
<ion-slides #slidesHolder
  pager
  paginationType="progress"
  [hidden]="!horizontalScrolling"
  spaceBetween="10"
  (ionSlideNextStart)="goToNextChapter()"
  (ionSlideDrag)="goToPreviousChapter($event)"
  (ionSlideDidChange)="savePageNumber()">
  <ion-slide *ngFor="let content of contents">
    <span [style.fontSize]="fontSize + 'px'" [innerHtml]="content"></span>
  </ion-slide>
</ion-slides>
<div #contentHolder id="contentHolder" [hidden]="!horizontalScrolling"></div>
<div class="navigation navigation-prev" [hidden]="!horizontalScrolling" (tap)="goToPrevPage($event)"></div>
<div class="navigation navigation-next" [hidden]="!horizontalScrolling" (tap)="goToNextPage($event)"></div>
<!-- end for horizontal scrolling -->
<!-- for vertical scrolling -->
<div class="vertical-content" [innerHtml]="content" #verticalContent [hidden]="horizontalScrolling">
</div>
<!-- end for vertical scrolling -->